<template>
<div class="HeaderTabs">
  <mu-tabs class="tabs" :value="activeTab" @change="handleTabChange">
      <mu-tab value="all" title="全部" />
      <mu-tab value="good" title="精华" />
      <mu-tab value="weex" title="weex" />
      <mu-tab value="share" title="分享" />
      <mu-tab value="ask" title="问答" />
      <mu-tab value="job" title="招聘" />
  </mu-tabs>
  <div class="waitloading" v-if="waitloading">
     <mu-circular-progress :size="60" class="nowloading"/>
  </div>
  <mu-list>
      <div v-for="(item,index) in items">
        <div class="list">
          <!--:to 实现点击头像进入该用户 ，:src+tag="img"实现item的头像展示；-->
          <img v-lazy="item.author.avatar_url" alt="user">
          <!--<router-link :to="{path:'/vue-home/dist/people',query:{user:item.author.loginname}}" v-lazy="item.author.avatar_url" tag="img" alt="user"></router-link>-->
          <!--同理实现点击进入帖子内容,以及判断显示置顶，精华等标签-->
          <!--<router-link :to="{path:'/vue-home/dist/content',query:{id:item.id}}" tag="div" class="content">-->
          <div class="content">
            <div class="list-title">
              <span v-if="item.top">置顶</span>
              <span v-else-if="item.good">精华</span>
              <span v-else-if="item.tab === 'share'" :style="styleObj">分享</span>
              <span v-else-if="item.tab === 'ask'" :style="styleObj">问答</span>
              <span v-else-if="item.tab === 'job'" :style="styleObj">招聘</span>
              <strong>{{item.title}}</strong>
            </div>
            <!--评论数和访问量和时间-->
            <div class="timer">
              <span> <mu-icon value="chat" :size="14"/>{{item.reply_count}} &nbsp <mu-icon value="visibility" :size="14"/>{{item.visit_count}}</span>
              <span>{{item.last_reply_at | formatDate }}</span>
            </div>
            </div>
          <!--</router-link>-->
        </div>
      </div>
      <!--若下拉加载没内容了 显示这个 -->
      <p class="nomore" v-show="nomore">内容到底啦</p>
    </mu-list>
  <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="loadMore" />
</div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      activeTab: 'all',
      items: [],
      url: 'https://www.vue-js.com/api/v1/topics?tab=all',
      page: 1,
      styleObj: {
          backgroundColor: '#C5C5C7'
      },
      waitloading: false,
      loading: false,
      scroller: null,
      nomore: false
    }
  },
  created () {
      this.getData()
  },
  mounted(){
      this.scroller = this.$el
  },
  methods: {
    handleTabChange (val) {
        this.page = 1,
        this.activeTab = val,
        this.url = 'https://www.vue-js.com/api/v1/topics?tab=' + val
        this.getData()
    },
    getData() {
        this.waitloading = true
        axios.get(this.url).then(response=>{
            this.items = response.data.data
            this.waitloading = false
            // console.log(this.items)
        })
    },
    loadMore () {
      if(!this.nomore&&!this.inloading) {
          this.loading = true
          this.page += 1
          let url = 'https://www.vue-js.com/api/v1/topics?tab=all' + '&page=' + this.page
          let arr = []
          setTimeout(()=> {
              axios.get(url).then( response =>{
                  arr = response.data.data
                  if(arr.length ===0) {
                      this.loading = false
                      this.nomore = true
                      return
                  }
                  this.items = [...this.items,...arr]
                  arr = []
              })
              this.loading = false
          }, 1000);
    }
    }
  }
}
</script>
<style scoped lang="scss">
 .HeaderTabs {
    overflow: auto;
    height: 100vh;
    .tabs {
      margin-top: 0rem;
      height: 4rem;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-around;
    }
  }
  .waitloading{
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 20;
      background: rgba(0, 0, 0, .5);
      color: #fff;
  }
  .nowloading {
      margin: 70% 42%;
  }
  .mu-tab-link,
  .mu-tab-active {
    white-space: nowrap;
  }
  
  .list {
    display: flex;
    border-bottom: 0.6rem solid #EFF2F7;
    padding: 1rem;
    >img {
      width: 3rem;
      height: 3rem;
      margin-right: 1rem;
    }
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .list-title {
        text-align: left;
        >span {
          background-color: #369219;
          color: #fff;
          padding: 0.2rem;
          border-radius: 0.2rem;
          font-size: 1rem;
          margin-right: 0.5rem;
        }
        strong {
          font-size: 1.4rem;
        }
      }
      .timer {
        display: flex;
        justify-content: space-between;
        color: #808080;
        padding-top: 1rem;
      }
    }
  }
  
  .nomore {
    text-align: center;
    padding: 1rem 0;
  }
</style>